Initial commitHEADmain

Created from https://vercel.com/new

5 files changed, 351 insertions, 0 deletions

diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx
new file mode 100644
index 0000000..e336a3d
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/Funnel.tsx
@@ -0,0 +1,134 @@
+import { Box, Column, Dialog, Grid, Icon, ProgressBar, Row, Text } from '@umami/react-zen';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { useMessages, useResultQuery } from '@/components/hooks';
+import { File, User } from '@/components/icons';
+import { ReportEditButton } from '@/components/input/ReportEditButton';
+import { ChangeLabel } from '@/components/metrics/ChangeLabel';
+import { Lightning } from '@/components/svg';
+import { formatLongNumber } from '@/lib/format';
+import { FunnelEditForm } from './FunnelEditForm';
+
+type FunnelResult = {
+  type: string;
+  value: string;
+  visitors: number;
+  previous: number;
+  dropped: number;
+  dropoff: number;
+  remaining: number;
+};
+
+export function Funnel({ id, name, type, parameters, websiteId }) {
+  const { formatMessage, labels } = useMessages();
+  const { data, error, isLoading } = useResultQuery(type, {
+    websiteId,
+    ...parameters,
+  });
+
+  return (
+    <LoadingPanel data={data} isLoading={isLoading} error={error}>
+      <Grid gap>
+        <Grid columns="1fr auto" gap>
+          <Column gap>
+            <Row>
+              <Text size="4" weight="bold">
+                {name}
+              </Text>
+            </Row>
+          </Column>
+          <Column>
+            <ReportEditButton id={id} name={name} type={type}>
+              {({ close }) => {
+                return (
+                  <Dialog
+                    title={formatMessage(labels.funnel)}
+                    variant="modal"
+                    style={{ minHeight: 300, minWidth: 400 }}
+                  >
+                    <FunnelEditForm id={id} websiteId={websiteId} onClose={close} />
+                  </Dialog>
+                );
+              }}
+            </ReportEditButton>
+          </Column>
+        </Grid>
+        {data?.map(
+          (
+            { type, value, visitors, previous, dropped, dropoff, remaining }: FunnelResult,
+            index: number,
+          ) => {
+            const isPage = type === 'path';
+            return (
+              <Grid key={index} columns="auto 1fr" gap="6">
+                <Column alignItems="center" position="relative">
+                  <Row
+                    borderRadius="full"
+                    backgroundColor="3"
+                    width="40px"
+                    height="40px"
+                    justifyContent="center"
+                    alignItems="center"
+                    style={{ zIndex: 1 }}
+                  >
+                    <Text weight="bold" size="3">
+                      {index + 1}
+                    </Text>
+                  </Row>
+                  {index > 0 && (
+                    <Box
+                      position="absolute"
+                      backgroundColor="3"
+                      width="2px"
+                      height="120px"
+                      top="-100%"
+                    />
+                  )}
+                </Column>
+                <Column gap>
+                  <Row alignItems="center" justifyContent="space-between" gap>
+                    <Text color="muted">
+                      {formatMessage(isPage ? labels.viewedPage : labels.triggeredEvent)}
+                    </Text>
+                    <Text color="muted">{formatMessage(labels.conversionRate)}</Text>
+                  </Row>
+                  <Row alignItems="center" justifyContent="space-between" gap>
+                    <Row alignItems="center" gap>
+                      <Icon>{type === 'path' ? <File /> : <Lightning />}</Icon>
+                      <Text>{value}</Text>
+                    </Row>
+                    <Row alignItems="center" gap>
+                      {index > 0 && (
+                        <ChangeLabel value={-dropped} title={`${-Math.round(dropoff * 100)}%`}>
+                          {formatLongNumber(dropped)}
+                        </ChangeLabel>
+                      )}
+                      <Icon>
+                        <User />
+                      </Icon>
+                      <Text title={visitors.toString()} transform="lowercase">
+                        {`${formatLongNumber(visitors)} ${formatMessage(labels.visitors)}`}
+                      </Text>
+                    </Row>
+                  </Row>
+                  <Row alignItems="center" gap="6">
+                    <ProgressBar
+                      value={visitors || 0}
+                      minValue={0}
+                      maxValue={previous || 1}
+                      style={{ width: '100%' }}
+                    />
+                    <Row minWidth="90px" justifyContent="end">
+                      <Text weight="bold" size="7">
+                        {Math.round(remaining * 100)}%
+                      </Text>
+                    </Row>
+                  </Row>
+                </Column>
+              </Grid>
+            );
+          },
+        )}
+      </Grid>
+    </LoadingPanel>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelAddButton.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelAddButton.tsx
new file mode 100644
index 0000000..29b5480
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelAddButton.tsx
@@ -0,0 +1,28 @@
+import { Button, Dialog, DialogTrigger, Icon, Modal, Text } from '@umami/react-zen';
+import { useMessages } from '@/components/hooks';
+import { Plus } from '@/components/icons';
+import { FunnelEditForm } from './FunnelEditForm';
+
+export function FunnelAddButton({ websiteId }: { websiteId: string }) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DialogTrigger>
+      <Button variant="primary">
+        <Icon>
+          <Plus />
+        </Icon>
+        <Text>{formatMessage(labels.funnel)}</Text>
+      </Button>
+      <Modal>
+        <Dialog
+          variant="modal"
+          title={formatMessage(labels.funnel)}
+          style={{ minHeight: 375, minWidth: 600 }}
+        >
+          {({ close }) => <FunnelEditForm websiteId={websiteId} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelEditForm.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelEditForm.tsx
new file mode 100644
index 0000000..5d950ea
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelEditForm.tsx
@@ -0,0 +1,141 @@
+import {
+  Button,
+  Column,
+  Form,
+  FormButtons,
+  FormField,
+  FormFieldArray,
+  FormSubmitButton,
+  Grid,
+  Icon,
+  Loading,
+  Row,
+  Text,
+  TextField,
+} from '@umami/react-zen';
+import { useMessages, useReportQuery, useUpdateQuery } from '@/components/hooks';
+import { Plus, X } from '@/components/icons';
+import { ActionSelect } from '@/components/input/ActionSelect';
+import { LookupField } from '@/components/input/LookupField';
+
+const FUNNEL_STEPS_MAX = 8;
+
+export function FunnelEditForm({
+  id,
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  id?: string;
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
+  const { formatMessage, labels } = useMessages();
+  const { data } = useReportQuery(id);
+  const { mutateAsync, error, isPending, touch } = useUpdateQuery(`/reports${id ? `/${id}` : ''}`);
+
+  const handleSubmit = async ({ name, ...parameters }) => {
+    await mutateAsync(
+      { ...data, id, name, type: 'funnel', websiteId, parameters },
+      {
+        onSuccess: async () => {
+          touch('reports:funnel');
+          touch(`report:${id}`);
+          onSave?.();
+          onClose?.();
+        },
+      },
+    );
+  };
+
+  if (id && !data) {
+    return <Loading placement="absolute" />;
+  }
+
+  const defaultValues = {
+    name: data?.name || '',
+    window: data?.parameters?.window || 60,
+    steps: data?.parameters?.steps || [{ type: 'path', value: '' }],
+  };
+
+  return (
+    <Form onSubmit={handleSubmit} error={error?.message} defaultValues={defaultValues}>
+      <FormField
+        name="name"
+        label={formatMessage(labels.name)}
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField autoFocus />
+      </FormField>
+      <FormField
+        name="window"
+        label={formatMessage(labels.window)}
+        rules={{ required: formatMessage(labels.required) }}
+      >
+        <TextField />
+      </FormField>
+      <FormFieldArray
+        name="steps"
+        label={formatMessage(labels.steps)}
+        rules={{
+          validate: value => value.length > 1 || 'At least two steps are required',
+        }}
+      >
+        {({ fields, append, remove }) => {
+          return (
+            <Grid gap>
+              {fields.map(({ id }: { id: string }, index: number) => {
+                return (
+                  <Grid key={id} columns="260px 1fr auto" gap>
+                    <Column>
+                      <FormField
+                        name={`steps.${index}.type`}
+                        rules={{ required: formatMessage(labels.required) }}
+                      >
+                        <ActionSelect />
+                      </FormField>
+                    </Column>
+                    <Column>
+                      <FormField
+                        name={`steps.${index}.value`}
+                        rules={{ required: formatMessage(labels.required) }}
+                      >
+                        {({ field, context }) => {
+                          const type = context.watch(`steps.${index}.type`);
+                          return <LookupField websiteId={websiteId} type={type} {...field} />;
+                        }}
+                      </FormField>
+                    </Column>
+                    <Button onPress={() => remove(index)}>
+                      <Icon size="sm">
+                        <X />
+                      </Icon>
+                    </Button>
+                  </Grid>
+                );
+              })}
+              <Row>
+                <Button
+                  onPress={() => append({ type: 'path', value: '' })}
+                  isDisabled={fields.length >= FUNNEL_STEPS_MAX}
+                >
+                  <Icon>
+                    <Plus />
+                  </Icon>
+                  <Text>{formatMessage(labels.add)}</Text>
+                </Button>
+              </Row>
+            </Grid>
+          );
+        }}
+      </FormFieldArray>
+      <FormButtons>
+        <Button onPress={onClose} isDisabled={isPending}>
+          {formatMessage(labels.cancel)}
+        </Button>
+        <FormSubmitButton>{formatMessage(labels.save)}</FormSubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage.tsx
new file mode 100644
index 0000000..57bce52
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/FunnelsPage.tsx
@@ -0,0 +1,36 @@
+'use client';
+import { Column, Grid } from '@umami/react-zen';
+import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { Panel } from '@/components/common/Panel';
+import { SectionHeader } from '@/components/common/SectionHeader';
+import { useDateRange, useReportsQuery } from '@/components/hooks';
+import { Funnel } from './Funnel';
+import { FunnelAddButton } from './FunnelAddButton';
+
+export function FunnelsPage({ websiteId }: { websiteId: string }) {
+  const { data, isLoading, error } = useReportsQuery({ websiteId, type: 'funnel' });
+  const {
+    dateRange: { startDate, endDate },
+  } = useDateRange();
+
+  return (
+    <Column gap>
+      <WebsiteControls websiteId={websiteId} />
+      <SectionHeader>
+        <FunnelAddButton websiteId={websiteId} />
+      </SectionHeader>
+      <LoadingPanel data={data} isLoading={isLoading} error={error}>
+        {data && (
+          <Grid gap>
+            {data.data?.map((report: any) => (
+              <Panel key={report.id}>
+                <Funnel {...report} startDate={startDate} endDate={endDate} />
+              </Panel>
+            ))}
+          </Grid>
+        )}
+      </LoadingPanel>
+    </Column>
+  );
+}
diff --git a/src/app/(main)/websites/[websiteId]/(reports)/funnels/page.tsx b/src/app/(main)/websites/[websiteId]/(reports)/funnels/page.tsx
new file mode 100644
index 0000000..2fdcf3b
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/(reports)/funnels/page.tsx
@@ -0,0 +1,12 @@
+import type { Metadata } from 'next';
+import { FunnelsPage } from './FunnelsPage';
+
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
+  const { websiteId } = await params;
+
+  return <FunnelsPage websiteId={websiteId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Funnels',
+};